<template>
	<div class="user-index">
		<a-modal
			v-model:visible="props.visible"
			class="user-modal"
			width="80%"
			@ok="handleOk"
			height="100%"
			:footer="null"
			@cancel="cancel"
		>
			<Renewal></Renewal>
			<div v-if="false">
			<h3>
				<!-- {{ isOnly ? "产品续订" : "加密锁续订" }} -->
				续订
			</h3>
			<div class="content">
				<a-descriptions
					bordered
					:column="1"
					:labelStyle="{
						background: '#F3F3F3',
						border: '1px solid #CACACA',
					}"
					:contentStyle="{
						border: '1px solid #CACACA',
					}"
				>
					<a-descriptions-item label="加密锁序列号">
						<span v-if="isOnly"> {{ props.isLock }} </span>
						<EditSelect
							v-if="!isOnly"
							ref="serialValue"
							:selectData="sns"
							:value="fromData.serial"
							@changeValue="changeValue"
						/>
					</a-descriptions-item>
					<a-descriptions-item label="产品名称">
						云算房
					</a-descriptions-item>
					<a-descriptions-item label="续订期限">
						<a-select
							v-model:value="fromData.extend1"
							style="width: 100%"
							placeholder="请选择"
							:bordered="false"
						>
							<a-select-option value="1">一个月</a-select-option>
							<a-select-option value="3">一季度</a-select-option>
							<a-select-option value="12">一年</a-select-option>
							<a-select-option value="24">两年</a-select-option>
							<a-select-option value="36">三年</a-select-option>
						</a-select>
					</a-descriptions-item>
					<a-descriptions-item label="购买人">
						{{ fromData.callUserName }}
					</a-descriptions-item>
					<a-descriptions-item label="联系电话">
						{{ fromData.tel }}
					</a-descriptions-item>
					<a-descriptions-item label="短信验证码">
						<div class="message">
							<a-input
								v-model:value="fromData.code"
								placeholder="请输入验证码"
							/>
							<a-button @click="smsCode">{{
								codeNum != 60
									? '倒计时' + codeNum
									: '发送验证码'
							}}</a-button>
						</div>
					</a-descriptions-item>
					<a-descriptions-item label="续订备注">
						<a-textarea
							v-model:value="fromData.description"
							placeholder="续订备注"
							maxLength="1000"
							:rows="4"
						/>
					</a-descriptions-item>
				</a-descriptions>
			</div>
			<div class="footer">
				<div class="left">
					<span class="desc"
						>续订申请提交后会，24小时内会有区域负责人联系具体续订事宜</span
					>
					<span class="info">客服热线：400-005-8008</span>
				</div>
				<div class="btn-list">
					<a-button @click="cancel">取消</a-button>
					<a-button
						type="primary"
						:loading="loading"
						@click="handleOk"
						>提交</a-button
					>
			</div>
		</div>
	  </div>
		</a-modal>
	</div>
</template>

<script setup>
import { watch, ref, defineProps, reactive, onMounted } from 'vue';
import { requestHttp } from '@/api/main.js';
import EditSelect from '@/components/EditSelect.vue';
import { message, notification } from 'ant-design-vue';
import Renewal from './renewal.vue';
const props = defineProps(['visible', 'isLock']);
console.log('asdsahdbkjsbfhdkjbsz', props);
const emits = defineEmits(['update:visible']);
let isOnly = ref(false);
let selectDog = ref({});
let selectBaseInfo = ref({});
const serialValue = ref();
let loading = ref(false);

let fromData = ref({
	serial: null,
	status: '0',
	applyType: 0,
	callUserName: '',
	tel: '',
	description: '',
	extend1: '1',
	code: '',
});
let sns = ref([]);
let getDogInfo = (id) => {
	requestHttp('controller.manager.read', { serial: id }).then((res) => {
		selectDog.value = res.data;
		console.log(res.data);
	});
};
const openNotificationWithIcon = (error) => {
	notification['error']({
		message: '错误信息',
		description: error,
	});
};
let getBaseInfo = (id) => {
	requestHttp('controller.admin.getHardwareBySerial', { serial: `${id}` }).then(
		(res) => {
			if (res.data?.result) {
				fromData.value.callUserName =
					res.data.result.enterprise.callUserName;
				fromData.value.tel = res.data.result.enterprise.tel;
				selectBaseInfo.value = res.data.result;
			} else {
				fromData.value.callUserName = '';
				fromData.value.tel = '';
				selectBaseInfo.value = {};
			}
		}
	);
};
const changeValue = (value) => {
	fromData.value.serial = value;
	handleChange(fromData.value.serial);
};
const handleOk = () => {
	if (isOnly.value) {
		fromData.value.serial = props.isLock;
	}
	if (!fromData.value.tel) {
		return openNotificationWithIcon('联系方式必填');
	}
	if (!fromData.value.extend1) {
		return openNotificationWithIcon('续期时间必填');
	}
	if (!fromData.value.description) {
		return openNotificationWithIcon('请输入续订备注');
	}
	if (!fromData.value.code) {
		return openNotificationWithIcon('手机验证码必填');
	}
	if (!selectBaseInfo.value.serial) {
		return openNotificationWithIcon('该设备不存在,请联系管理员');
	}
	if (selectBaseInfo.value.status == 2) {
		return openNotificationWithIcon('该设备已经挂失，无法继续使用');
	}
	// if (selectDog.value.loss) {
	// 	return openNotificationWithIcon('该设备已经挂失，无法继续使用');
	// }
	loading.value = true;

	requestHttp('controller.admin.apply', fromData.value).then((res) => {
		console.log('挂失返回', res);
		loading.value = false;

		if (res.status != 200) {
			openNotificationWithIcon(res.msg);
		} else {
			message.success('已提交申请,请等待平台处理');
			setTimeout(() => {
				cancel();
			}, 1000);
		}
	});
};
let handleChange = (e) => {
	// getDogInfo(e);
	getBaseInfo(e);
};
const codeNum = ref(60);
let clearId = null;
let smsCode = async () => {
	if (codeNum.value != 60) return;
	if (fromData.value.tel) {
		let res = await requestHttp('controller.admin.smsCode', {
			tel: fromData.value.tel,
		});
		clearId = setInterval(() => {
			codeNum.value--;
			if (codeNum.value == 0) {
				clearInterval(clearId);
				codeNum.value = 60;
			}
		}, 1000);
	}
};
const cancel = () => {
	reset();
	emits('update:visible', false);
};
let getSn = () => {
	requestHttp('controller.manager.getSn').then((res) => {
		sns.value = res.data;
	});
};
watch(
	() => props.isLock,
	() => {
		getData();
	}
);
const reset = () => {
	console.log('走了reset');
	serialValue.value && serialValue.value.reset();
	fromData.value.serial = null;
	if (!isOnly.value) {
		fromData.value.callUserName = '';
		fromData.value.tel = '';
	}
	fromData.value.extend1 = '1';
	fromData.value.description = '';
	fromData.value.code = '';
};
const getData = () => {
	console.log('++++++++++++++', props.isLock);
	!props.isLock ? (isOnly.value = false) : (isOnly.value = true);
	console.log('++++++++++++++', isOnly.value);
	isOnly.value ? handleChange(props.isLock) : getSn();
};
onMounted(() => {
	getData();
});
</script>

<style lang="scss" scoped>
.message {
	// display: flex;
	// justify-content: space-between;
	position: relative;
	.ant-input {
		// width: 60%;
		text-align: center;
		border: none;
	}
	.ant-btn {
		border: 1px solid #6590fc;
		color: #287cfa;
		position: absolute;
		right: 10px;
		// margin-right: 10px;
	}
}
:deep(.ant-descriptions-row) {
	height: 44px;
	line-height: 44px;
}
:deep(.ant-descriptions-row .ant-descriptions-item-label) {
	text-align: right;
	padding: 0 24px;
	width: 30%;
}
:deep(.ant-descriptions-row .ant-descriptions-item-content) {
	text-align: center;
	padding: 0 0px;
}
.content {
	height: 350px;
	overflow-y: auto;
}
.status {
	color: #15b426;
}
.footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: 30px;
	.left {
		span {
			font-size: 12px;
			display: block;
		}
		.desc {
			color: #de3f3f;
		}
		.info {
			font-size: 12px;
			margin-top: 5px;
		}
	}
	.btn-list {
		button + button {
			margin-left: 10px;
		}
	}
}
.ant-input {
	width: 100%;
	text-align: center;
	border: none;
	&:focus {
		box-shadow: none !important;
	}
	.ant-input-focused {
		box-shadow: none !important;
	}
}
.ant-select {
	width: 100%;
	text-align: center;
	border: none;
	&:focus {
		box-shadow: none !important;
	}
	.ant-select-focused {
		box-shadow: none !important;
	}
}
.write-error {
	.text {
		margin-top:20px;
	}
	.phone {
		margin-bottom: 50px;
	}
	.footer {
		display: flex;
		justify-content: center;
	}
}
</style>
